<template>
  <view class="intro-container">
    <!-- 顶部区域包含标题和历史记录按钮 -->
    <view class="top-container">
      <!-- 顶部大标题区域 -->
      <view class="hero">
        <text class="hero-line">亲爱的退休规划家</text>
        <text class="hero-line">欢迎来到退休模拟器~</text>
      </view>
      <!-- 历史记录按钮 -->
      <view class="history-button" @tap="goToHistory">
        <text class="history-icon">🕒</text>
      </view>
    </view>

    <!-- 中部信息卡 -->
    <view class="info-card">
      <view class="info-panel">
        <text class="info-title">👤个人信息</text>
        <view class="info-divider"></view>
        <view class="panel-row">
            <view class="info-grid">
              <view class="info-item">
                <text class="info-label">姓名</text>
                <text class="info-value"> {{ baseInfo.name }} </text>
              </view>
              <view class="info-item">
                <text class="info-label">性别</text>
                <text class="info-value"> {{ baseInfo.gender }} </text>
              </view>
              <view class="info-item">
                <text class="info-label">职业</text>
                <text class="info-value"> {{ baseInfo.occupation }} </text>
              </view>
              <view class="info-item">
                <text class="info-label">当前年龄</text>
                <text class="info-value"> {{ baseInfo.currentAge }} 岁</text>
              </view>
              <view class="info-item">
                <text class="info-label">退休年龄</text>
                <text class="info-value"> {{ baseInfo.retirementAge }} 岁</text>
              </view>
              <view class="info-item">
                <text class="info-label">当前储蓄</text>
                <text class="info-value"> {{ baseInfo.currentSavings }} 元</text>
              </view>
            </view>
            <image class="panel-image-right" src="/static/people.png" mode="widthFix"></image>
          </view>
      </view>
      
    </view>

    <!-- 底部信息卡 -->
    <view class="info-card">
      <view class="info-panel">
        <text class="info-title">⚠️须知</text>
        <view class="info-divider"></view>
        <view class="panel-row">
          <view class="info-grid">
            <view class="info-item">
              <text class="info-value">高富帅的退休模拟计划即将启动！！每次投资周期均为十年！ </text>
            </view>
      </view>
    </view>
  </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="actions">
      <view class="arrow-button" @tap="goNext">
        <view class="chevron"></view>
  </view>
  </view>
  </view>
</template>

<script>
import config from '../../config/api.js';
export default {
  data() {
    return {
      baseInfo: { name: '高富帅', gender: '男', occupation: '程序员', currentAge: 25, retirementAge: 65, currentSavings: 10000, investmentYears: 10 }
    };
  },
  methods: {
    // 跳转到历史记录页面
    goToHistory() {
      uni.navigateTo({
        url: '/pages/simulator/history'
      });
    },
    
    goNext() {
      // 发送带有Authorization header的请求到/api/game/start
      uni.request({
        url: config.baseUrl + '/api/simulator/start',
        method: 'POST',
        header: {
          'Authorization': 'Bearer ' + uni.getStorageSync('token') || '',
          'Content-Type': 'application/json'
        },
        success: (res) => {
          console.log('游戏初始化成功', res);
          // 请求成功后导航到下一个页面
          uni.redirectTo({ url: '/pages/simulator/risk-select' });
        },
        fail: (err) => {
          console.error('游戏初始化失败', err);
          // 即使请求失败也导航到下一个页面（根据需求可以调整）
          uni.redirectTo({ url: '/pages/simulator/risk-select' });
        }
      });
    }
  }
}
</script>

<style scoped>
/* 页面背景与整体布局 */
.intro-container {
  height: 100vh;
  padding: 40rpx 36rpx 60rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #E6F0FF 0%, #FFFFFF 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
}

/* 顶部容器样式 */
.top-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 54rpx;
  margin-bottom: 44rpx;
  position: relative;
}

/* 顶部大标题样式 */
.hero { flex: 1; margin-right: 20rpx; }

/* 历史记录按钮样式 */
.history-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, rgba(57, 179, 255, 0.4) 0%, rgba(102, 204, 255, 0.3) 100%);
  border-radius: 16rpx;
  border: 2rpx solid rgba(33, 150, 243, 0.5);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.history-button:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.5) 0%, rgba(102, 204, 255, 0.4) 100%);
}

.history-icon {
  font-size: 48rpx;
}
.hero-line {
  display: block;
  font-size: 64rpx;
  font-weight: 800;
  letter-spacing: 2rpx;
  text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.15);
  background: linear-gradient(90deg, #6A8EDB 0%, #A0D9FF 100%);
  -webkit-background-clip: text;
  color: transparent;
}

/* 信息卡容器 */
.info-card {
  width: 88%;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 24rpx 24rpx;
  box-shadow: 0 10rpx 32rpx rgba(0, 0, 0, 0.10);
  border: 2rpx solid rgba(0,0,0,0.06);
  margin-bottom: 28rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
}
.info-card-title {
  display: block;
  font-size: 28rpx;
  color: #718096;
  margin-bottom: 12rpx;
}

/* 信息面板与行样式 */
.info-panel { width: 50%; display: flex; flex-direction: column; gap: 20rpx; }
.panel-row { display: flex; align-items: flex-start; gap: 16rpx; justify-content: space-between; }
.info-grid { display: flex; flex-direction: column; gap: 24rpx; flex: 1; }
.panel-image-right { width: 40%; max-width: 40%; height: auto; border-radius: 8rpx; flex: 0 0 50%; }
.info-title { font-size: 40rpx; font-weight: 700; color: #2D3748; margin-bottom: 10rpx; }
.info-divider { height: 6rpx; width: 100%; background: linear-gradient(90deg, #6A8EDB 0%, #A0D9FF 100%); border-radius: 3rpx; }
.info-item { display: flex; align-items: center; justify-content: flex-start; gap: 12rpx; padding: 8rpx 4rpx; border: none; border-radius: 0; background: transparent; min-height: auto; box-shadow: none; }
.info-label { font-size: 28rpx; color: #7aa4ff; font-weight: 700; }
.info-label::after { content: '：'; margin: 0 8rpx 0 4rpx; color: #718096; font-weight: 400; }
.info-value { font-size: 36rpx; color: #1A202C; font-weight: 800; letter-spacing: 2rpx; margin-top: 0; }

/* 底部按钮容器 */
.actions { width: 92%; margin-top: 36rpx; display: flex; flex-direction: column; align-items: center; gap: 12rpx; }
.cta-label { font-size: 30rpx; color: #2D3748; font-weight: 600; }

/* 独立箭头圆形按钮 */
.arrow-button { width: 112rpx; height: 112rpx; background: linear-gradient(135deg, #7FA3D9 0%, #A4BCE1 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.12); }
.chevron { width: 30rpx; height: 30rpx; position: relative; }
.chevron::before { content: ''; position: absolute; left: -18rpx; top: 50%; width: 30rpx; height: 6rpx; background: #FFFFFF; transform: translateY(-50%); border-radius: 3rpx; }
.chevron::after { content: ''; position: absolute; right: 0; top: 50%; width: 16rpx; height: 16rpx; border-right: 6rpx solid #FFFFFF; border-top: 6rpx solid #FFFFFF; transform: translateY(-50%) rotate(45deg); border-radius: 2rpx; }
.arrow-button:active { filter: brightness(0.96); transform: scale(0.98); }

/* 移动端适配 */
@media screen and (max-width: 480px) {
  .hero-line { font-size: 56rpx; }
  .info-card { width: 92%; flex-direction: column; }
  .actions { width: 96%; }
  .info-grid { gap: 18rpx; }
  .panel-image { width: 100rpx; }
  .panel-image-right { width: 130rpx; }
  .info-panel, .info-figure { width: 100%; }
  .info-divider { height: 4rpx; }
}
.main-title {
  font-size: 56rpx;
  font-weight: bold;
  color: #2D3748;
  margin-bottom: 20rpx;
  display: block;
}

.sub-title {
  font-size: 32rpx;
  color: #718096;
  line-height: 1.5;
}
.info-figure { width: 50%; display: flex; align-items: center; justify-content: center; }
.info-image { width: 220rpx; height: auto; border-radius: 12rpx; box-shadow: none; }
</style>